<template>
  <div class="managementSetting">
    <div class="headnavigation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>查勤监督</el-breadcrumb-item>
        <el-breadcrumb-item class="currentPage">临时勤务</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <main class="content">
      <div class="TAB">
        <div>
          <section class="selectBox">
            <span>值班队伍名称</span>
            <el-select
              v-model="obj_searchData.s_card"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入队伍名称关键词"
              :remote-method="remoteMethod"
            >
              <el-option
                v-for="item in obj_returnRemoteData.arr_card"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </section>
          <section class="selectBox smallSelectBox">
            <span>警号</span>
            <el-select
              v-model="obj_searchData.s_name"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入警号关键词"
              :remote-method="remoteMethod"
            >
              <el-option
                v-for="item in obj_returnRemoteData.arr_name"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </section>
          <section class="selectBox">
            <span>所属部门</span>
            <el-select v-model="obj_searchData.s_deparment">
              <el-option
                v-for="item in obj_returnRemoteData.arr_deparment"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </section>
          <section class="left_button">
            <button>搜索</button>
            <button>重置</button>
          </section>
        </div>
        <div>
          <button @click="addservice">新增</button>
          <button @click="deleteEvent">删除</button>
        </div>
      </div>
      <div class="tableMain">
        <el-table
          ref="multipleTable"
          :data="arr_tableData"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="10%"></el-table-column>
          <el-table-column label="编号" width="60%" type="index"></el-table-column>
          <el-table-column label="警号" prop="s_policenumber">
            <!-- <template slot-scope="scope">{{ scope.row.s_position }}</template> -->
          </el-table-column>
          <el-table-column label="照片">
            <template slot-scope="scope">
              <img src="../../assets/policewoman.jpg" />
            </template>
          </el-table-column>
          <el-table-column prop="s_name" label="姓名" show-overflow-tooltip></el-table-column>
          <el-table-column prop="s_phone" label="联系方式" show-overflow-tooltip></el-table-column>
          <el-table-column prop="s_matter" label="执行事项" show-overflow-tooltip></el-table-column>
          <el-table-column prop="s_time" label="执行时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="s_state" label="状态" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                class="lookButton"
                @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button>
              <el-button
                class="deleteBtn"
                size="mini"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 删除事件弹窗 -->
      <el-dialog
        title="单个删除"
        :visible.sync="d_editDialogVisible"
        class="ditDialogVisible"
        width="20%"
        center="true">
        <form>
          <div class="photo">
            <img
              style="width: 18px;height: 18px;background: #FA504B;border-radius: 50%;"
              src="../../assets/监测预警@3x.png"
              alt
            />
            <p style="font-size: 18px;">是否确定删除这个账号？</p>
          </div>
        </form>
        <div class="deleteDialogButton">
          <button class="cancel" @click.prevent="d_editDialogVisible = false">取 消</button>
          <button class="delete" @click.prevent="d_editDialogVisible = false">删 除</button>
        </div>
      </el-dialog>
      <!-- 新增临时勤务 -->
      <el-dialog
        title="新增临时勤务"
        :visible.sync="addservice_editDialogVisible"
        class="editDialogVisible"
        width="25%"
        center="true">
        <form>
          <div>
            <div>
              <label for="equipmentName">
                警号:
                <input type="text" id="equipmentName" />
              </label>
            </div>
            <div>
              <label for="equipmentType">
                姓名:
                <input type="text" id="equipmentType" />
              </label>
            </div>
            <div>
              <label for="phoneNumber">
                电话:
                <input type="text" id="phoneNumber" />
              </label>
            </div>
            <div>
              <label for="phoneNumber">
                执行事项:
                <textarea class="matter"></textarea> 
                <!-- <input class="matter" type="text" id="phoneNumber" /> -->
                <!-- <span  type="text" ></span> -->
              </label>
            </div>
            <div>
              <label for="phoneNumber">
                执行时间:
                <div class="block">
                  <el-date-picker v-model="value1" prefix-icon='el-icon-circle-close' type="datetime" placeholder="选择日期时间"></el-date-picker>
                </div>
              </label>
            </div>
          </div>
        </form>
        <div class="editDialogButton">
          <button @click.prevent="addservice_editDialogVisible = false">保 存</button>
          <button @click.prevent="addservice_editDialogVisible = false">取 消</button>
        </div>
      </el-dialog>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:currentPage="s_currentPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="60"
        ></el-pagination>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      s_currentPage: "",
      arr_tableData: [
        {
          s_policenumber: "09716465615",
          s_name: "张三",
          s_phone: "18349194856",
          s_matter:'前往某某地方处理某某事件',
          s_time: "2021-5-4 12:00",
          s_state:'已执行'
        },
        {
          s_policenumber: "09716465615",
          s_name: "张三",
          s_phone: "18349194856",
          s_matter:'前往某某地方处理某某事件',
          s_time: "2021-5-4 12:00",
          s_state:'已执行'
        },
        {
          s_policenumber: "09716465615",
          s_name: "张三",
          s_phone: "18349194856",
          s_matter:'前往某某地方处理某某事件',
          s_time: "2021-5-4 12:00",
          s_state:'处理中'
        },
        {
          s_policenumber: "09716465615",
          s_name: "张三",
          s_phone: "18349194856",
          s_matter:'前往某某地方处理某某事件',
          s_time: "2021-5-4 12:00",
          s_state:'未处理'
        },
        {
          s_policenumber: "09716465615",
          s_name: "张三",
          s_phone: "18349194856",
          s_matter:'前往某某地方处理某某事件',
          s_time: "2021-5-4 12:00",
          s_state:'未处理'
        },
        {
          s_policenumber: "09716465615",
          s_name: "张三",
          s_phone: "18349194856",
          s_matter:'前往某某地方处理某某事件',
          s_time: "2021-5-4 12:00",
          s_state:'处理中'
        },
      ],
      obj_searchData: {
        s_card: "",
        s_name: "",
        s_deparment: "",
        s_userPosition: ""
      },
      // 模糊查询，远程搜索返回结果
      obj_returnRemoteData: {
        arr_card: [],
        arr_name: [],
        arr_deparment: ["两江分局", "鸳鸯派出所"],
        arr_userPosition: ["超级管理员", "管理员", "民警", "辅警"]
      },
      //查看
      b_editDialogVisible: false,
      //删除
      d_editDialogVisible: false,
      //新增
      addservice_editDialogVisible: false
    };
  },
  methods: {
    remoteMethod(value) {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //查看
    handleEdit(index, row) {
      this.b_editDialogVisible = true;
      console.log(index, row);
    },
    //删除
    handleDelete(index, row) {
      this.d_editDialogVisible = true;
      console.log(index, row);
    },
    //新增
    addservice(index, row) {
      this.addservice_editDialogVisible = true;
      console.log(index, row);
    },
    //全选删除
    deleteEvent() {
      this.$confirm("是否确定删除两条记录?", "批量删除", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/sass/checkingSupervision/service.scss";
</style>